$(function() {
  var pageSize = 4;
  var currentPage = 1;
  function render() {
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "get", //get或post
      url: "/category/querySecondCategoryPaging", //请求的地址
      data: {
        page: currentPage,
        pageSize: pageSize
      }, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        console.log(res);
        $("tbody").html(template("tmp", res));
        setPage(res.total);
      }
    });
  }
  render();
  // 2- 分页
  // 1-分页标签的个数， 根据后台数据库数据的总数来生成
  // 2-分页标签 使用插件生成
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页  高亮效果加给谁
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值,就是当前页面
        console.log(page);
        // 改写当前页码值
        currentPage = page;
        // 重新渲染
        render();
      }
    });
  }
  // 3- 动态填充一级分类下拉列表
  // 取数据 +模板渲染
  //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
  $.ajax({
    type: "get", //get或post
    url: "/category/queryTopCategoryPaging", //请求的地址
    data: {
      page: 1,
      pageSize: 999
    }, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
    dataType: "json", //text,json,xml,jsonp
    success: function(res) {
      //成功的回调函数
      console.log(res);
      $(".cate-one").html(template("tmp-one", res));
    }
  });
  // 4-下拉列表选中效果
  // 1- 当a标签被点击时， 获取a标签的文字， 赋值给按钮；
  // 2- 获取a标签对应id， 存放到隐藏域中， 将来传递给后台
  $(".cate-one").on("click", "a", function() {
    $(".cate-title").text($(this).text());
    // $("#categoryId").val($(this).attr("data-id"));
    $("#categoryId").val($(this).data("id"));
    // var ids = $(this).data("id");
    // console.log(ids);

    // 手动恢复校验状态
    // - NOT_VALIDATED：未校验的
    // - VALIDATING：校验中的
    // - INVALID ：校验失败的
    // - VALID：校验成功的。
    $(".add-form")
      .data("bootstrapValidator")
      .updateStatus("categoryId", "VALID");
  });
  //   4-4 图片上传
  //   注意点： 数据和文件是分开存储的！
  //   使用 文件上传插件 jquery-fileupload.js
  // 5- 图片上传jquery.fileupload.js 初始化
  $("#file").fileupload({
    // 文件服务器返回的数据以json进行处理
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr 可以获取上传后的图片地址
    // success: function (){}
    // 图片上传完成后，当前文件服务器返回时，会执行done
    done: function(e, data) {
      console.log(data.result.picAddr);
      var url = data.result.picAddr;
      // 预览图片
      $("#img").attr("src", url);
      // 把图片地址存放到隐藏域中
      $("#brandLogo").val(url);
      // 手动恢复图片校验状态
      $(".add-form")
        .data("bootstrapValidator")
        .updateStatus("brandLogo", "VALID");
    }
  });
  // 6- 表单校验
  //使用表单校验插件
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],
    // 需要校验隐藏域  hidden

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择一级分类"
          }
        }
      },
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "二级分类不能为空"
          }
        }
      },
      brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择图片"
          }
        }
      }
    }
  });
  // 7-手动恢复 图片 和下拉列表校验状态
  //     1- 在下拉列表选中后， 手动恢复下拉列表的校验状态
  //     2- 在图片上传完成后， 恢复图片的校验状态

  // 8-添分类
  // 1- 点击提交按钮，在表单数据合理的情况下，向后台发送请求,进行添加
  // 2- 填充完成后，页面重新渲染，隐藏模态框、重置表单
  $(".add-form").on("success.form.bv", function(e) {
    // 阻止默认行为
    e.preventDefault();
    // ajax提交
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "post", //get或post
      url: "/category/addSecondCategory", //请求的地址
      data: $(".add-form").serialize(), //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 重新渲染数据
        render();
        // 隐藏模态框
        $(".modal-add").modal("toggle"); //show hide toggle
        // 重置表单
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
        // 手动重置一级分类和图片上传
        $(".cate-title").text("请选择一级分类");
        $("#img").attr("src", "./images/none.png");
      }
    });
  });
});
